<template>
  <div class="head-menus-bg">
    <div class="head-menus">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        class="menus"
        background-color="#246BDD"
        text-color="#fff"
        active-text-color="#fff"
        @select="handleSelect"
        :router="true"
      >
        <!-- 权限 菜单 -->
        <template v-for="(menu, index) in roleMenu">
          <el-menu-item v-if="menu.children.length == 0" :index="menu.path" :key="`${menu.path}-${index}`">{{
            menu.name
          }}</el-menu-item>
          <el-submenu v-if="menu.children.length > 0" :index="menu.path" :key="`${menu.path}-${index}`">
            <template slot="title">{{ menu.name }}</template>
            <el-menu-item v-for="(item, i) in menu.children" :index="`${item.path}`" :key="`${menu.path}-${i}`">{{
              item.name
            }}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import _Const from '@/Const';
import { getUserMenus } from '@/api/user';

@Component({
  components: {},
})
export default class HeadMenusComponent extends Vue {
  activeIndex = '' as any;
  NavData = [] as Array<string>;
  handleSelect(key: string, keyPath: string) {
    // console.log(key, keyPath);
  }

  routesArr = [] as any;
  routesArrNoChild = [] as any;

  @Watch('$route', { deep: true })
  async onChangeRoute(to: any, from: any) {
    // 监听网址切换菜单
    this.activeIndex = _Const.UrlList.find(it=>this.$route.path.includes(it));
  }

  mounted() {
    this.getUserMenus();
  }

  isShowMenus = [] as any;
  roleMenu = [] as any;
  getUserMenus() {
    this.routeHandle();
  }
  filterArr(arr) {
    return arr.map((i) => {
      i.path = i.path.split('#')[1];
      if (i.children && i.children.length) {
        this.filterArr(i.children);
      }
      return i;
    });
  }
  // 路由处理
  async routeHandle() {
    const rtn = (await getUserMenus()) as any;

    // 动态路由
    let routeArr = rtn && rtn.filter((i) => i.code === 'ETMS_RECONCILIATION')[0].children[0];

    let routeCarr = routeArr.children === undefined ? [] : routeArr.children;
    routeCarr.map((item: any) => {
      if (item.children === undefined) {
        let obj = {
          path: item.path.split('#')[1],
          name: item.name,
        };
        this.roleMenu.push(obj);
      } else {
        let obj = {
          path: item.path.split('#')[1],
          name: item.name,
          children: [],
        } as any;

        item.children.map((ele: any) => {
          let eleObj = {
            path: ele.path.split('#')[1],
            name: ele.name,
          } as any;

          obj.children.push(eleObj);
        });
        this.roleMenu.push(obj);
      }
    });
    this.activeIndex = this.$route.path;
  }
}
</script>

<style scoped lang="less">
@import './index.less';
</style>
